<template>
  <view class="material-box">
    <view class="material-select">
      <view class="material-png" v-for="(item,index) in imageList" :key="index">
        <view class="material-sent" v-if="!item.uploadStatus">
          <progress class="select-tips" :percent="item.schedule" stroke-width="4" activeColor="#B99C65"/>
          <view class="tips-text">
            上传进度{{ item.schedule }}%
          </view>
        </view>
        <image src="@/qualifyLnvestor/static/close.png" mode="" class="close-png" @click="closeImg(index)">
        </image>
        <image :src="item.tempFilePath" mode="" class="selected-png" v-if="item.type=='image'"></image>
        <view v-else class="selected-name">{{ item.name }}</view>
      </view>
      <view class="material-png" @click="selectPicture" v-if="selectimageIsShow">
        <image src="@/qualifyLnvestor/static/picture.png" mode="" class="picture-png"></image>
        <view class="picture-text">
          添加证明
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  computed: {
    ...mapGetters('user', ['openid'])
  },
  data() {
    return {
      imageList: [], // 反显图片集合
      cusNo: '', // 客户号
      selectimageIsShow: true, // 添加图片功能按钮默认显示
      accessToken: '',
    };
  },
  methods: {
    selectPicture() {
      const that = this;
      if (this.imageList.length == 5) {
        uni.showToast({
          title: '温馨提示, 最多上传5个文件',
          icon: 'fail',
          duration: 2000, //持续时间为 2秒
        })
      } else {
        let counts = (5 - this.imageList.length)
        uni.chooseMedia({
          count: counts,
          mediaType: ['image'],
          sourceType: ['album', 'camera'],
          success: (res) => {
            console.log('选择图片', res)
            let tempFilePaths = res.tempFiles;
            let selectImage = [];
            tempFilePaths.forEach((item) => {
              if (item.size >= 8388608) {
                uni.showToast({
                  title: '温馨提示, 单个文件大小不能超过8M',
                  icon: 'fail',
                  duration: 2000, //持续时间为 2秒
                })
              } else {
                selectImage.push({
                  type: item.fileType,
                  tempFilePath: item.tempFilePath,
                  name: new Date().getTime(),
                  schedule: 0,
                  uploadStatus: false,
                })
              }
            })
            that.imageList = that.imageList.concat(selectImage);
            // if (that.imageList.length === 5) {
            // 	that.selectimageIsShow = false
            // }
            that.imageList.forEach((item) => {
              if (!item.uploadStatus) {
                const uploadTask = uni.uploadFile({
                  url: this.$baseurl + '/upload_img', //上传接口地址
                  filePath: item.tempFilePath,
                  name: 'image[]',
                  header: {
                    'content-type': 'multipart/form-data'
                  },
                  formData: {
                    openid: that.openid
                  },
                  success: (uploadFileRes) => {
                    console.log('图片上传成功： ', uploadFileRes);
                    if (uploadFileRes.statusCode === 200) {
                      let uploadDate = JSON.parse(uploadFileRes
                          .data);
                      if (uploadDate.code == 'MOP000000') {
                        item.contenidNo = uploadDate.data;
                      } else {
                        that.selectimageIsShow = true;
                        this.imageList = this.imageList.filter(
                            item => {
                              return item.contenidNo !==
                                  undefined && item
                                      .contenidNo == null &&
                                  item.contenidNo == ''
                            });
                      }
                    }
                    console.log(uploadFileRes);
                    // item.contenidNo = uploadFileRes.data.
                  }
                });

                uploadTask.onProgressUpdate((res) => {
                  console.log('上传进度' + res.progress);
                  console.log('已经上传的数据长度' + res.totalBytesSent);
                  console.log('预期需要上传的数据总长度' + res
                      .totalBytesExpectedToSend);
                  item.schedule = res.progress;
                  if (res.progress == 100) {
                    item.uploadStatus = true;
                  }
                  // 测试条件，取消上传任务。
                  if (res.progress > 50000) {
                    uploadTask.abort();
                  }
                });
              }
            })
          }
        });
      }
    }
  }
}
</script>
<style lang="scss">
.material-box {
  width: 686rpx;
  padding: 32rpx;
  background: #fff;
  margin-top: 24rpx;
  margin-left: 32rpx;
  padding-bottom: 32rpx;
  border-radius: 8rpx;

  .item-top {
    height: 50rpx;
    line-height: 50rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
  }

  .material-item {
    width: 622rpx;
    border-radius: 8rpx;
    background: #f8f8f8;
    padding: 16rpx;
    margin-top: 24rpx;

    .item-list {
      font-size: 28rpx;
      font-weight: 400;
      line-height: 56rpx;
      height: 56rpx;
      color: #B99C65;
    }
  }

  .material-select {
    display: flex;
    flex-wrap: wrap;
    margin-top: 24rpx;

    .material-png {
      width: 191rpx;
      height: 191rpx;
      border-radius: 12rpx;
      border: 2rpx dashed #B99C65;
      margin-right: 8rpx;
      margin-left: 8rpx;
      margin-bottom: 16rpx;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background: #F8F8F8;

      .material-sent {
        width: 189rpx;
        height: 189rpx;
        background: rgba(245, 245, 245, 0.5);
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .select-tips {
          width: 130rpx;
          height: 10rpx;
          margin-bottom: 12rpx;
        }

        .tips-text {
          font-size: 24rpx;
          color: #B99C65;
        }
      }

      .close-png {
        position: absolute;
        top: 6rpx;
        right: 6rpx;
        width: 40rpx;
        height: 40rpx;
      }

      .selected-png {
        width: 180rpx;
        height: 180rpx;
        border-radius: 12rpx;
      }

      .selected-name {
        width: 180rpx;
        word-break: break-all;
        overflow: hidden;
      }

      .picture-png {
        width: 40rpx;
        height: 32rpx;
        margin-bottom: 8rpx;
      }

      .picture-text {
        font-size: 28rpx;
        height: 40rpx;
        line-height: 40rpx;
        color: #B99C65;
      }
    }
  }
}
</style>
